import { Component, ReactNode } from "react";
import { View, Text, Image } from "@tarojs/components";
import { AtButton, AtList, AtListItem, AtNavBar } from "taro-ui";
import Req from "../../utils/request";
import Taro from "@tarojs/taro";
import i1 from "./images/i1.png";
import i6 from "./images/i6.png";
import i7 from "./images/i7.png";

import "./index.scss";

export default class PerformanceDetail extends Component {
  state = {
    info: {
      performanceList: [],
    },
  };
  get performanceId() {
    const { router } = Taro.getCurrentInstance();
    return router?.params.id ?? "";
  }
  componentDidMount(): void {}
  componentDidShow() {
    this.initData();
  }
  initData = () => {
    if (this.performanceId) {
      Req.get(
        "/project/performance/list",
        {
          futuresProjectId: this.performanceId,
        },
        {
          loading: false,
        }
      )
        .then((r) => {
          if (r.code === 200 && r.rows) {
            this.setState({
              info: r.rows[0],
            });
          }
        })
        .catch((e) => {});
    }
  };
  render(): ReactNode {
    const _type = {
      1: "自评",
      2: "主管评价",
      3: "财政评价",
    };
    const { info }: any = this.state;
    return (
      <View>
        <AtNavBar
          leftIconType="chevron-left"
          leftText="返回"
          color="#3051BE"
          onClickLeftIcon={() => {
            Taro.navigateBack();
          }}
        >
          <View>详情</View>
        </AtNavBar>

        <AtList>
          <AtListItem
            className="form-list-item"
            title={"项目名称"}
            note={info.projectName}
          />
          <AtListItem
            className="form-list-item"
            title={"期债名称"}
            note={info.futuresBondsName}
          />
          <AtListItem
            className="form-list-item"
            title={"期债年份"}
            note={info.year}
          />
          <AtListItem
            className="form-list-item"
            title={"期债年限"}
            note={info.duration}
          />

          {/* <AtButton
            onClick={() => {
              Taro.navigateTo({
                url: "/pages/performance-form/index?pid=" + this.performanceId,
              });
            }}
            type="primary"
            size="small"
            className="mt-2"
          >
            新增
          </AtButton> */}

          <View className="plan-title-box">
            <Text className="plan-title">评价列表</Text>
            <View
              onClick={() => {
                Taro.navigateTo({
                  url:
                    "/pages/performance-form/index?pid=" + this.performanceId,
                });
              }}
              className="plan-add"
            >
              <Image mode="widthFix" src={i1} />
              <Text>新增</Text>
            </View>
          </View>
          <View className="plan-table">
            <View className="plan-tr">
              <View className="plan-th">评价年份</View>
              <View className="plan-th">评价类型</View>
              <View className="plan-th">评价得分</View>
              <View className="plan-th"></View>
            </View>
            {info?.performanceList.map((e, i) => (
              <View key={i} className="plan-tr">
                <View className="plan-td">{e.year}</View>
                <View className="plan-td">{_type[e.type] ?? ""}</View>
                <View className="plan-td">{e.score}</View>
                <View className="plan-td">
                  {e.state == 0 && (
                    <Image
                      onClick={() => {
                        Taro.showModal({
                          title: "提示",
                          content: "确认删除？",
                          success: (res) => {
                            if (res.confirm) {
                              Req.post("/project/performance/" + e.id).then(
                                (r) => {
                                  if (r.code === 200) {
                                    this.initData();
                                  }
                                }
                              );
                            }
                          },
                        });
                      }}
                      src={i6}
                      className="plan-btn"
                    />
                  )}
                  <Image
                    onClick={() => {
                      Taro.navigateTo({
                        url:
                          "/pages/performance-form/index?pid=" +
                          this.performanceId +
                          "&id=" +
                          e.id,
                      });
                    }}
                    src={i7}
                    className="plan-btn"
                  />
                </View>
              </View>
              // <AtListItem
              //   onClick={() => {
              //     Taro.navigateTo({
              //       url:
              //         "/pages/performance-form/index?pid=" +
              //         this.performanceId +
              //         "&id=" +
              //         e.id,
              //     });
              //   }}
              //   key={i}
              //   note={
              //     <View>
              //       <View className="pf-tr">
              //         <View className="pf-label">评价年份</View>
              //         <View className="pf-content">{e.year}</View>
              //       </View>
              //       <View className="pf-tr">
              //         <View className="pf-label">评价类型</View>
              //         <View className="pf-content">{_type[e.type] ?? ""}</View>
              //       </View>
              //       <View className="pf-tr">
              //         <View className="pf-label">评价得分</View>
              //         <View className="pf-content">{e.score}</View>
              //       </View>
              //       <View className="pf-tr">
              //         <View className="pf-label">评价结果</View>
              //         <View className="pf-content">{e.outcome}</View>
              //       </View>
              //       <View className="pf-tr">
              //         <View className="pf-label">公开链接</View>
              //         <View className="pf-content">{e.openUrl}</View>
              //       </View>
              //     </View>
              //   }
              // />
            ))}
          </View>
        </AtList>
      </View>
    );
  }
}
